<template>
  <div class="web-header">
    <div class="container header-container">
      <div class="header-container__content">
        <div class="nav-link">
          <ul class="nav-link-ul">
            <li class="nav-link-item">
              <nuxt-link to="/" target="_blank" class="link">
                <img src="~static/images/v1.0.2/header-logo.png" width="130" height="42" alt />
              </nuxt-link>
            </li>
            <li class="nav-link-item">
              <nuxt-link to="/" target="_blank" class="link">首页</nuxt-link>
            </li>
            <ucLessonAll class="nav-link-item link-item--hover"></ucLessonAll>
            <!-- 免费专区 -->
            <li class="nav-link-item link-item--hover">
              <nuxt-link to="/" target="_blank" class="link">免费专区</nuxt-link>
            </li>
            <!-- 精英讲师 -->
            <li class="nav-link-item link-item--hover">
              <nuxt-link to="/" target="_blank" class="link">精英讲师</nuxt-link>
            </li>
            <!-- 订阅服务 -->
            <li class="nav-link-item link-item--hover">
              <nuxt-link to="/" target="_blank" class="link">订阅服务</nuxt-link>
            </li>
            <!-- 联系我们 -->
            <li class="nav-link-item link-item--hover">
              <nuxt-link to="/" target="_blank" class="link">联系我们</nuxt-link>
            </li>
          </ul>
        </div>
        {{avator}}
        <!-- 用户中心 -->
        <div class="nav-user-center">
          <ucAutoComplete class="uc-item"></ucAutoComplete>
          <div class="uc-item uc-nav">
            <ul class="nav-item">
              <li>
                <ucMessage :loginStatus="loginStatus"></ucMessage>
              </li>
            </ul>
          </div>
          <ucUser class="uc-item" :loginStatus="loginStatus"></ucUser>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="babel">
import "./header.scss";

import { mapState } from "vuex";

import ucAutoComplete from "./components/autocomplete";
import ucUser from "./components/user";
import ucMessage from "./components/message";
import ucLessonAll from "./components/lesson-all";
export default {
  components: {
    ucAutoComplete,
    ucUser,
    ucMessage,
    ucLessonAll
  },
  data() {
    return {
      collapsed: false
    };
  },
  computed: {
    ...mapState({
      loginStatus: "account/loginStatus"
    })
  },
  methods: {
    menuBtn() {
      this.collapsed = !this.collapsed;
    },
    // 初始化加载单个学习记录
    loadNewStudyLesson() {
      newStudyLesson()
        .then(({ respCode, respMsg, result }) => {
          if (respCode !== "0") {
            this.$message({
              message: `加载学习记录失败，原因是:${respMsg}`,
              type: "error"
            });
            return;
          }
          this.newStudyLesson = result;
        })
        .catch(err => {
          this.$message({
            message: `加载学习记录失败`,
            type: "error"
          });
        });
    },

    // 初始化记载用户信息
    // loadPcGetUserInfo() {
    //   pcUserInfo()
    //     .then(({ respCode, respMsg, result }) => {
    //       if (respCode !== '0') {
    //         this.$message({
    //           message: `加载用户信息失败，原因是:${respMsg}`,
    //           type: 'error'
    //         });
    //         return;
    //       }
    //       this.setUserAvatar(result);
    //       this.userInfo = result;
    //     })
    //     .catch((err) => {
    //       this.$message({
    //         message: `加载用户信息失败`,
    //         type: 'error'
    //       });
    //     });
    // },
    toPlayer(lessonId) {
      this.$router.push({
        path: "/player",
        query: {
          lessonId: lessonId
        }
      });
    },
    toProfile(i) {
      this.$router.replace(
        {
          path: "/profile/userCenter",
          query: {
            tabIndex: i
          }
        },
        _ => {
          window.location.reload();
        }
      );
    },
    toUserSetting() {
      this.$router.push({ path: "/setting" });
    },
    gotoHome(page, selectId) {
      let path = page;
      let seleId = selectId;
      localStorage.setItem("toId", seleId);
      this.$router.push({ path: path });
    },
    toLogin() {
      this.$router.push("/login");
    },
    toRegister() {
      this.$router.push("/register");
    },
    removerLogin() {
      remove("sid");
      remove("login__pass");
      remove("login__username");
      this.$router.push("/login");
    },
    search() {
      console.log(1);
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      console.log(results);
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      debugger;
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [];
    },
    handleSelect(item) {
      // console.log(item);
      this.$router.push({
        path: "/keySearch",
        query: {
          lessonLabel: item.value
        }
      });
    },
    querySystemMsg() {
      let self = this;
      this.timer ? clearInterval(this.timer) : null;
      this.timer = setInterval(function() {
        notification({ type: 1, page: self.page }).then(
          ({ result, respCode }) => {
            if (respCode == 0) {
              result.list = result.list ? result.list : [];
              self.emptyArr = self.doFilterNotRead(result.list);
              notification({ type: 2, page: self.page }).then(({ result }) => {
                result.list = result.list ? result.list : [];
                let list2 = self.doFilterNotRead(result.list);
                self.emptyArr = self.emptyArr.concat(list2);
                if (self.emptyArr.length > 0) {
                  self.showDot = true;
                } else if (self.emptyArr.length == 0) {
                  self.showDot = false;
                }
              });
            } else {
              clearInterval(this.timer);
            }
          }
        );
      }, 5000);
      // notification(params).then(({result})=>{
      //   this.emptyArr = this.doFilterNotRead(result.list);
      //   params.type = 2;
      //   notification(params).then(({result})=>{
      //     let list2 = this.doFilterNotRead(result.list);
      //     this.emptyArr = this.emptyArr.concat(list2);
      //     if( this.emptyArr.length > 0 ){
      //       this.showDot = true;
      //     }
      //   })
      // });
    },
    doFilterNotRead(list) {
      let unRead = list.filter(function(item) {
        return item.isRead == 2;
      });
      return unRead;
    },
    // 跳转搜索页面
    handleIconClick(item) {
      let routeParams = {
        path: "/keySearch",
        query: {
          lessonName: this.state
        }
      };

      this.$router.push(routeParams);
    },

    /**
     * 跳转免费专区
     */
    handleClickGotoFreeLesson() {
      this.$router.push({
        path: "/viewMore",
        query: {
          sort: 4
        }
      });
    },
    /**
     * 跳转联系我们
     */
    handleClickSubscriptionService() {
      this.$router.push({
        path: "/profile/userCenter?tabIndex=4"
      });
    },

    handleClickTeacher() {
      // 如果当前是在首页  那么跳到
      if (this.$route.path === "/") {
        document.getElementById("teacher-elite").scrollIntoView();
      } else {
        this.$router.push({
          path: "/#teacher-elite"
        });
      }
    },
    /**
     * 跳转联系我们
     */
    handleClickGotoContactUs() {
      this.$router.push({
        path: "/contact-us"
      });
    }
  },
  mounted() {}
};
</script>
